<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*tooltip这个样式是给js中使用的*/
        .tooltip{
            background-color: black;
            color: white;
            font-size: 10px;
            width: 120px;
            height: 70px;
        }
        #p_2{
            margin-top: 1000px;
        }
    </style>

    <script src="../../js/my_libary_position.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.addEventListener("load", function (evt) {
            var hasToolTipArr = document.getElementsByClassName("hasToolTip");
            for(var i = 0; i < hasToolTipArr.length; i++){
                hasToolTipArr[i].addEventListener("mouseover", showToolTip);
                hasToolTipArr[i].addEventListener("mouseout", hideToolTip);
            }


            function showToolTip(event) {
                var target = event.target;//获取触摸的对象
                var parent = target.parentElement;//父元素结点
                var body = document.getElementsByTagName("body")[0];

                //创建tooltip的div，并设置内容和class
                var toolTipDiv = document.createElement("div");
                var toolTipDivContentTextNode = document.createTextNode(parent.title);
                toolTipDiv.appendChild(toolTipDivContentTextNode);
                toolTipDiv.className = "tooltip";

                //设置toolTipDiv的位置
                var currentPos = getCursorPosition(event);
                toolTipDiv.style.position = "absolute";
                toolTipDiv.style.left = currentPos[0] + 10 + "px";
                toolTipDiv.style.top = currentPos[1] + 10 + "px";
                toolTipDiv.style.visibility = "hidden";//这里不能display = none，否则不会测量toolTipDiv的大小

                //将tooltip的div添加到body中去
                body.appendChild(toolTipDiv);

                //横向或者是纵向超出了窗口大小的处理
                var scrollingPosition = getScrollingPosition();
                var viewportSize = getViewportSize();
                console.log(currentPos[0]);
                console.log(scrollingPosition[0]);
                console.log(toolTipDiv.offsetWidth);
                console.log(viewportSize[0]);
                //横向超标 currentPos[0] - scrollingPosition[0]就等于clientX
                if(currentPos[0] - scrollingPosition[0] + 10 + toolTipDiv.offsetWidth > viewportSize[0]){
                    toolTipDiv.style.left = viewportSize[0] - 10 - toolTipDiv.offsetWidth + scrollingPosition[0] + "px";
                }
                //纵向超标 currentPos[1] - scrollingPosition[1]就等于clientY
                if(currentPos[1] - scrollingPosition[1] + 10 + toolTipDiv.offsetHeight > viewportSize[1]){
                    toolTipDiv.style.top = viewportSize[1] - 10 - toolTipDiv.offsetHeight + scrollingPosition[1] + "px";
                }
                //横向和纵向都超标,在当前位置的左上角，不能遮住鼠标
                if((currentPos[0] - scrollingPosition[0] + 10 + toolTipDiv.offsetWidth > viewportSize[0]) &&
                    (currentPos[1] - scrollingPosition[1] + 10 + toolTipDiv.offsetHeight > viewportSize[1])){
                    toolTipDiv.style.left = viewportSize[0] - 10 - toolTipDiv.offsetWidth - (viewportSize[0] - event.clientX)
                        + scrollingPosition[0] + "px";
                    toolTipDiv.style.top = viewportSize[1] - 10 - toolTipDiv.offsetHeight - (viewportSize[1] - event.clientY)
                        +  scrollingPosition[1] + "px";
                }
                toolTipDiv.style.visibility = "visible";
                
                target.toolTip = toolTipDiv;//给target添加自定义属性，主要是方便删除
            }
            
            function hideToolTip(event) {
                //console.log("hide");
                if(event == 'undefined'){
                    event = window.event;
                }
                var target = event.target;
                var body = document.getElementsByTagName("body")[0];
                body.removeChild(target.toolTip);
            }
            
        });

    </script>
</head>
<body>


<p title="所谓平台移植性，是指程序只需要编译一次，即可在任何平台上面运行，即一次编译，到处运行">
    Java具有简单性、面向对象、分布式、健壮性、安全性、
    <a class="hasToolTip" href="#">平台独立与可移植性</a>
    、多线程、动态性等特点。
    Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等
</p>

<p id="p_2" title="所谓平台移植性，是指程序只需要编译一次，即可在任何平台上面运行，即一次编译，到处运行">
    Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，
    因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地
    <a class="hasToolTip" href="#">实现了面向对象理论</a>，
    允许程序员以优雅的思维方式进行复杂的编程
</p>
</body>
</html>